<template>

  <!-- 自动监测 -->

  <div class="board_page" style="z-index:999">
    <!-- 左边 -->
    <item name="监测统计" style="z-index: 999;width: calc(23% - 0px);position: absolute;top: 7%;height: 53vh">
      <div>
        <div class="numBody">
          <div class="numBodyTitle">
            <span> {{dataCount.name}}</span>
          </div>
          <div class="numList">
            <number-scroll :number="dataCount.count ? dataCount.count : 0"></number-scroll>

          </div>
        </div>
        <div class="cardBody">
          <div class="cardBodyItem" v-for="item in monitor || []"
               :key="item.name">
            <icon1 v-if="item.name === '工点'"></icon1>
            <icon2 v-if="item.name === '监测点'"></icon2>
            <div class="cardBodyItemR">
              <div class="cardBodyItemRTitle">{{item.name}}</div>
              <div v-if="item.name === '工点'" class="cardBodyItemBottom">
                <p class="gsapNum">{{item.value}}</p>
                <span>个</span>
              </div>
              <div v-if="item.name === '监测点'" class="cardBodyItemBottom cardBodyItemBottom2">
                <p class="gsapNum">{{item.value}}</p>
                <span>个</span>
              </div>
            </div>
          </div>
        </div>
        <div class="item3Info">
          <div @click.stop="toMgmt(item)" class="item3InfoItem wow fadeInLeft" :data-wow-delay="index*0.5+'s'" v-for="(item,index) in monitorType"
               :key="index">
            <div  class="item3InfoItemIcon">
              <div class="iconBg">
                <img v-if="item.name === '人工监测点'" src="./assets/icon1.png" alt="">
                <img v-if="item.name === '自动监测点'" src="./assets/icon2.png">
<!--                <img v-if="item.name === '接入监测点'" src="./assets/icon3.png" alt="">-->
                <img v-if="item.name === '在线'" src="./assets/icon4.png" alt="">
                <img v-if="item.name === '离线'" src="./assets/icon5.png" alt="">
                <img v-if="item.name === '无设备'" src="./assets/icon6.png" alt="">
              </div>
            </div>
            <div  class="item3InfoItemR">
              <div class="item3InfoItemTitle">{{ item.name }}</div>
              <div class="item3InfoItemRBottom">
                <div class="item3InfoItemNum">
                  <p class="gsapNum">{{item.value}}</p>
                </div>
                <div class="item3InfoItemUnit">个</div>
              </div>
            </div>
          </div>
        </div>


      </div>
    </item>
    <item name="监测类型占比统计" style="z-index: 999;width: calc(23% - 0px);position: absolute;top: 59%;height: 32vh"
    :style="isControl?'top: 64%':''"
    >
      <div class="echartsBodys" v-if="eChartsList.length>10">
        <echarts1 name="监测类型" :total="echartsTotal" :list="eChartsList" ref="echarts"></echarts1>
        <div class="echartList">
          <div class="listItem cur" @click="getChecked(item)" v-for="(item,index) in firstPart" :key="index">
            <div class="listIteml">
              <div class="dot" :class="{disabled:!item.checked}"
                   :style="'background: linear-gradient(80deg,'+item.color+' 0%, '+item.color+' 100%);'"></div>
              <span :class="{disabled:!item.checked}">{{ item.name }}</span>
            </div>
            <em class="num"
                v-if="item.checked">{{
              item.value
              }}</em>
            <em class="num"
                v-else>{{
              item.value
              }}</em>
          </div>
        </div>
        <div class="echartList2">
          <div class="listItem cur" @click="getChecked(item)" v-for="(item,index) in lastPart" :key="index">
            <div class="listIteml">
              <div class="dot" :class="{disabled:!item.checked}"
                   :style="'background: linear-gradient(80deg,'+item.color+' 0%, '+item.color+' 100%);'"></div>
              <span :class="{disabled:!item.checked}">{{ item.name }}</span>
            </div>
            <em class="num"
                v-if="item.checked">{{
              item.value
              }}</em>
            <em class="num"
                v-else>{{
              item.value
              }}</em>
          </div>
        </div>
      </div>
      <div class="echartsBodys" v-else>
        <echarts1 name="监测类型" :total="echartsTotal" :list="eChartsList" ref="echarts"></echarts1>
        <div class="echartListAll">
          <div class="listItem cur" @click="getChecked(item)" v-for="(item,index) in eChartsList" :key="index">
            <div class="listIteml">
              <div class="dot" :class="{disabled:!item.checked}"
                   :style="'background: linear-gradient(80deg,'+item.color+' 0%, '+item.color+' 100%);'"></div>
              <span :class="{disabled:!item.checked}">{{ item.name }}</span>
            </div>
            <em class="num"
                v-if="item.checked">{{
              item.value
              }}</em>
            <em class="num"
                v-else>{{
              item.value
              }}</em>
          </div>
        </div>
      </div>
    </item>

    <dv-border-box-8
      v-if="isControl"
      style="height: 25vh;margin-left: 2.5vw"
      class="bottom_center fade_animition_center"
      :color="['#3a506a', '#0049ff']"
      backgroundColor="rgba(5, 34, 83, 0.6)">
      <h6 class="l_title-s">项目信息</h6>
      <div class="s-detail">
        <ul>
          <li>项目名称：<span>{{projectDetail.name}}</span></li>
        </ul>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-row>
              <el-col :span="15">
                <ul>
                  <li>所属行政区：<span>{{projectDetail.area?projectDetail.area:'---'}}</span></li>
                  <li>位置信息：<span>{{projectDetail.position?projectDetail.position:'---'}}</span></li>
                </ul>
              </el-col>
              <el-col :span="9">
                <ul>
                  <li>所属行业：<span>{{projectDetail.industryName?projectDetail.industryName:'---'}}</span></li>
                  <li>工程阶段：<span>{{projectDetail.stageName?projectDetail.stageName:'---'}}</span></li>
                </ul>
                <!-- 项目图片-->
              </el-col>
            </el-row>
            <!-- 项目概况-->
            <div v-if="projectDetail.survey" class="project_survey">{{projectDetail.survey}}</div>
            <div v-else class="project_survey">暂无项目简介</div>
          </el-col>
          <!--          <el-col :span="8" style="margin-top:10px">-->
          <!--            <el-carousel trigger="click" height="150px;">-->
          <!--              <el-carousel-item v-for="(item,index) in projectDetail.projectInfoImgList" :key="index">-->
          <!--                <el-image style="height:140px;width:100%"-->
          <!--                          @click.stop="previewImg(index,projectDetail.projectInfoImgList)"-->
          <!--                          :src="constUrl+item" fit="cover"></el-image>-->
          <!--              </el-carousel-item>-->
          <!--            </el-carousel>-->
          <!--          </el-col>-->
        </el-row>
      </div>
    </dv-border-box-8>




    <!-- 右边 -->
    <item name="最新预警提示" style="z-index: 999;width: calc(23% - 0px);position: absolute;right:1.3%;top: 7%;height: 53vh">
      <iTable :list="rightTableList" :head="headList"></iTable>
    </item>


    <item name="预警等级"  :style="isControl?'top: 64%':''" style="z-index: 999;width: calc(23% - 0px);position: absolute;right:1.3%;top: 59%;height: 32vh">
      <div class="list">
        <div class="listItem" v-for="(item,index) in countWarn" :key="item.id">
          <div class="listItemLeft">
            <span class="name">{{ item.warningLevelName }}</span>
          </div>
          <div class="listItemRight" @click="seeMap(item.warningLevel)">
            <progressBar :index="index" :total="maxValue" :item="item"></progressBar>
          </div>
        </div>
      </div>
    </item>

    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>

<script>
  import echarts1 from "../components/echarts.vue";
  import progressBar from '../components/progressBar.vue'
  import {
    countWarnList,
  } from '@/services/model/project-info.js'
  import {monitorTypeCount, queryRecentMonitorList} from '@/services/model/monitor-board'
  import Format from '@/utils/format'
  import NumberScroll from '../components/number-scroll'
  import {store} from "../../../monitor/work-point.store";
  import PictureViewer from '@/components/picture-viewer'
  import constUrl from '@/services/env'
  import icon1 from '../components/icon1/index.vue'
  import icon2 from '../components/icon2/index.vue'
  import item from "@/components/item/index.vue";
  import iTable from '../components/iTable.vue'

  const Echarts = require('echarts')

  export default {
    components: {NumberScroll, PictureViewer, icon1, icon2, item, iTable, progressBar, echarts1},
    data() {
      return {
        eChartsList: [
        {
          name: '深部位移',
          value: 159,
          color: '#D8007B',
          checked: true
        }, {
          name: '地表位移',
          value: 77,
          color: '#46ACCD',
          checked: true
        }, {
          name: '拉线位移',
          value: 112,
          color: '#B26736',
          checked: true
        }, {
          name: '降雨',
          value: 31,
          color: '#0087EC',
          checked: true
        }, {
          name: '水位',
          value: 57,
          color: '#5E4FE6',
          checked: true
        }, {
          name: '锚索应力',
          value: 2,
          color: '#0CC0C6',
          checked: true
        }, {
          name: '静力水准',
          value: 4,
          color: '#A24A5D',
          checked: true
        }, {
          name: '倾角仪',
          value: 593,
          color: '#3381A7',
          checked: true
        }, {
          name: '风速风向',
          value: 1,
          color: '#CDC02A',
          checked: true
        }, {
          name: '应力应变',
          value: 1,
          color: '#59B6D5',
          checked: true
        }, {
          name: '机器视觉',
          value: 2,
          color: '#B47661',
          checked: true
        }, {
          name: '全站仪',
          value: 512,
          color: '#625C94',
          checked: true
        }, {
          name: '摄像机',
          value: 50,
          color: '#082EBE',
          checked: true
        }, {
          name: '振动',
          value: 2,
          color: '#25C05A',
          checked: true
        },
      ],
        maxValue: 0,
        headList: [
          {
            "title": "工点名称",
            "flex": 1,
            "id": "workPointName"
          },
          {
            "title": "测点名称",
            "flex": 1,
            "id": "pointName"
          },
          {
            "title": "预警时间",
            "flex": 1,
            "id": "createTimeName"
          },
          {
            "title": "预警等级",
            "flex": 1,
            "id": "warningLevelName"
          },
          {
            "title": "操作",
            "flex": 1,
            "id": "details"
          }
        ],
        show: true,
        constUrl,
        countWarn: [],
        charts: null,
        // 右边列表
        rightTableList: [],
        equipStatus: [],
        monitorType: [],
        dataCount: {},
        monitor: {},
      }
    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer));
      },
      // 预警等级颜色
      gradeColor(val) {
        switch (val) {
          case 1:
            return "background-color:#0DC26B !important";
          case 2:
            return "background-color:#0073b7 !important";
          case 3:
            return "background-color:#f39c12 !important";
          case 4:
            return "background-color:#ff851b !important";
          case 5:
            return "background-color:#e43321 !important";
          default:
            return "background-color:#0DC26B !important";
        }
      },
    },

    computed: {
      firstPart() {
        // 返回除了最后四个之外的所有数据
        return this.eChartsList.slice(0, -4);
      },
      lastPart() {
        // 返回最后四个数据
        return this.eChartsList.slice(-4);
      },
      echartsTotal: function () {
        var total = 0
        this.eChartsList.forEach((type) => {
          total += type.value
        });
        return total
      },

      isControl() {
        if (this.$route.params.projectId) {
          return true
        }
        return false
      },
      projectDetail() {
        return store.projectInfo
      },
      rightTableConfig() {
        return {
          header: ['', '工点名称', '测点名称', '预警时间', '预警等级', '操作'],
          data: this.rightTableList.map(x => [
            x,
            x.workPointName,
            x.pointName,
            x.createTime ? Format(new Date(x.createTime), 'yyyy-MM-dd') : '',
            x.warningLevelName,
            '查看',
          ]),
          headerBGC: 'transparent',
          oddRowBGC: 'transparent',
          evenRowBGC: 'transparent',
          rowNum: 5,
          headerHeight: 40,
          //第一个值用作跳转使用，把padding样式去掉，就不展示；最后一个作为查看按钮
          columnWidth: ['0px;padding:0', 200, 180, 180, 140, '100px;color: #1990FE;cursor: pointer;'],
        }
      }
    },
    methods: {
      toMgmt(item){
        let onlineStatus=null
        if(item.name=='在线'){
          onlineStatus=1
        }else if(item.name=='离线'){
          onlineStatus=2
        }else if(item.name=='无设备'){
          onlineStatus=3
        }
        if(onlineStatus!==null){
          this.$router.push({
            path: `/monitor-mgmt`,
          });
        }

      },
      getChecked(item) {
        this.eChartsList.forEach((type) => {
          if(type.name === item.name) {
            type.checked = !type.checked
            this.$refs.echarts.drawEcharts()
          }
          // this.list[index].checked = !this.list[index].checked
        });

      },
      // 查看大图
      previewImg(index, urls) {
        this.$refs.imageViewer.showViewer(urls.map(x => this.constUrl + x), index)
      },
      // 预警等级修改地图
      seeMap(index) {
        this.$emit('getShopCode', index)
      },
      // 预警等级占比
      async warnCountList(projectId) {
        let res = await countWarnList({projectId});
        this.countWarn = res.data ? res.data : [];
        if (this.countWarn.length > 0) {
          this.maxValue = this.countWarn.reduce((acc, item) => acc + item.num, 0);
          this.countWarn.map(x => {
            switch (x.warningLevelName) {
              case 'I级预警':
                return x.color = '#e43321'
              case 'II级预警':
                return x.color = '#ff851b'
              case'III级预警':
                return x.color = '#f39c12'
              case 'IV级预警':
                return x.color = '#0073b7'
              case '正常':
                return x.color = '#0DC26B'

            }

          })
        }

      },
      click(data) {
        let row = data.row[0]
        this.$router.push({
          path: `/project/${row.projectId}/work-point/${row.workPointId}/monitor/${row.monitorType}?activeId=${row.pointId}`,
        });
      },
      // 隐患排查-最近数据轮播(TOP20)
      async queryRightList(projectId) {
        const {data} = await queryRecentMonitorList({projectId})
        this.rightTableList = data || []
        this.rightTableList.map(x => {
          x.details = '查看'
          x.createTimeName = x.createTime ? Format(new Date(x.createTime), 'yyyy-MM-dd') : ''
          switch (x.warningLevelName) {
            case 'I级预警':
              return x.color = '#e43321'
            case 'II级预警':
              return x.color = '#ff851b'
            case'III级预警':
              return x.color = '#f39c12'
            case 'IV级预警':
              return x.color = '#0073b7'
            case '正常':
              return x.color = '#0DC26B'

          }

        })
      },
      // 左边的echarts
      async queryLeftChart(projectId) {
        const {data} = await monitorTypeCount({projectId})
        const list = data?.typeCount.map(x => ({name: x.name, value: x.value})) || []
        this.dataCount = {
          img: require('../imgs/list_icon_0.png'),
          name: '实时数据总量',
          count: data.mainCount.find(x => x.name === '监测数据总量').value || 0,
          color: 'color3'
        }
        this.equipStatus = data.mainCount.filter(x =>
          x.name === '在线' || x.name === '离线' || x.name === '无设备'
        )
        this.monitor = data.mainCount.filter(x =>
          x.name === "工点" || x.name === '监测点'
        )
        this.monitorType = data.mainCount.filter(x =>
          x.name === '在线' || x.name === '离线' || x.name === '无设备' || x.name === "自动监测点" || x.name === '人工监测点'
        )

        this.dispatchAction1 = ''
        this.dispatchAction2 = ''
        this.updateChart(list)
      },
      // 初始化echarts
      initChart() {
        this.charts = Echarts.init(this.$refs.chart_3, null, {
          locale: 'ZH'
        })
      },
      // 渲染数据
      updateChart(data) {
        let dataList=[]
        data.map(x=>{
          switch (x.name) {
            case '深部位移':
              x.color='#D8007B'
              x.checked=true
              dataList.push(x)
              return
            case '地表位移':
              x.color='#46ACCD'
              x.checked=true
              dataList.push(x)
              return
            case '拉线位移':
              x.color='#B26736'
              x.checked=true
              dataList.push(x)
              return
            case '降雨':
              x.color='#0087EC'
              x.checked=true
              dataList.push(x)
              return
            case '水位':
              x.color='#5E4FE6'
              x.checked=true
              dataList.push(x)
              return
            case '锚索应力':
              x.color='#0CC0C6'
              x.checked=true
              dataList.push(x)
              return
            case '静力水准':
              x.color='#A24A5D'
              x.checked=true
              dataList.push(x)
              return
            case '倾角仪':
              x.color='#3381A7'
              x.checked=true
              dataList.push(x)
              return
            case '风速风向':
              x.color='#CDC02A'
              x.checked=true
              dataList.push(x)
              return
            case '应力应变':
              x.color='#59B6D5'
              x.checked=true
              dataList.push(x)
              return
            case '机器视觉':
              x.color='#B47661'
              x.checked=true
              dataList.push(x)
              return
            case '全站仪':
              x.color='#625C94'
              x.checked=true
              dataList.push(x)
              return
            case '摄像机':
              x.color='#082EBE'
              x.checked=true
              dataList.push(x)
              return
            case '振动':
              x.color='#25C05A'
              x.checked=true
              dataList.push(x)
              return
          }
        })
   this.eChartsList=dataList
     this.$nextTick(()=>{
       this.$refs.echarts.drawEcharts()
     })
      },
      // 路线改变
      refresh(projectId) {
        this.queryLeftChart(projectId)
        this.queryRightList(projectId)
        this.warnCountList(projectId)
      },
    },

    mounted() {

      window.onresize = () => {
        this.charts.resize()
      }
    },
    activated() {
      this.initChart()
    }
  }
</script>

<style lang="less" scoped>
  @import url('./common.less');
</style>

<style lang="less" scoped>

  .left_project {
    width: 25.5rem !important; /* 392/16 */;
  }

  .dv_table_right {
    margin-top: 1.5rem /* 24/16 */;
    width: 100%;
    height: 30vh;
    overflow: hidden;
  }

  .assess_total {
    margin-top: 1.5rem /* 24/16 */;
    display: flex;
    flex-wrap: wrap;

    .assess_total-item {
      margin-right: 1.5rem /* 24/16 */;
      margin-bottom: 1rem /* 16/16 */;
      flex-grow: 1;

      button {
        width: 100%;
      }
    }
  }

  .chart_3 {
    width: 90%;
    height: 26vh;
    margin-left: 5%;

  }

  .left-li {
    position: relative;
    margin: 0.2rem 0.5rem;
    width: 50%;
    background: linear-gradient(92.75deg, rgba(58, 69, 90, 0.3612) 0.33%, rgba(21, 30, 49, 0.387) 100.73%);
  }

  .left .left-li:hover {
    cursor: pointer;
  }

  .left-li-top::after {
    display: block;
    content: " ";
    clear: both;
  }

  .left .left-li .left-li-top-title {
    float: left;
    color: #D5E3E8;
    font-size: 0.8rem;
  }

  .left .left-li .left-li-title-right {
    float: right;
    font-size: 0.55rem;
    color: #939EA3;
  }

  .left-li-bottom {
    position: relative;
    border-top: 1px solid #3A506A;
    display: flex;
    justify-content: space-around;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    font-size: 0.75rem;
    color: #939EA3;
    margin-top: 2%;
    padding-top: 2%;
    line-height: 4;
  }

  .left-li-bottom::before, .left-li-bottom::after {
    content: " ";
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    background: #3A506A;
    position: absolute;
    top: -0.15rem;
    z-index: 2;
  }

  .left-li-bottom::before {
    left: 0;
  }

  .left-li-bottom::after {
    right: 0;
  }

  .left .left-li .left-li-top-title img {
    width: 2.0rem;
    vertical-align: bottom;
  }

  .card-num-box {
    text-align: center;

    .title3 {
      font-size: 1.125rem;
      line-height: 1.5;
      color: #D5E3E8;
    }
  }

  .grade-card {
    color: #ffffff;
    margin-bottom: 8px;
    font-size: 13px;
    /*height: 6vh;*/

    /deep/ .el-card__body {
      padding: 0px;
      display: flex;
      align-items: center;
    }

    /deep/ .el-card__body i,
    .el-card__body .grade-box {
      display: inline-block;
      vertical-align: middle;
    }

    .grade-box {
      display: inline-block;
      padding: 10px 0;
      width: 75%;

      p {
        margin-bottom: 1vh;

      }
    }

    /deep/ .s-progress {
      display: block;
      width: 100%;

      .el-progress-bar__outer {
        background-color: #9a9a9a;
        width: 100%;
      }
    }

    .grade-word {
      font-size: 14px !important;
      width: 65px;
    }

    i {
      padding-right: 7px;
      font-size: 26px !important;
    }
  }


  .equipmentBox {
    width: 50%;
    /*display: inline-block;*/
  }

  .s-detail ul li {
    padding: 7px;
    border-bottom: 1px solid #ebeef5;
    font-weight: bold;
    font-size: 10px;
    color: #82a8f2;
  }

  .s-detail ul li span {
    font-weight: normal;
    color: #ffffff;
  }

  .project_survey {
    overflow: auto;
    word-wrap: break-word;
    color: #ffffff;
    font-size: 13px;
    line-height: 20px;
    text-indent: 20px;
    height: 10vh;
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #8c939d;
    border-radius: 10px;
  }
</style>

<style lang="less" scoped>
  .pageItemBody {
    width: 100%;
    position: relative;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    z-index: 1;
    align-content: flex-start;

    .title {
      height: 66px;
      width: calc(105% - 0px);
      display: flex;
      margin-left: -2%;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      position: relative;
      z-index: 10;
    }

    .bg {
      height: 0%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: linear-gradient(to bottom, rgba(#00699b, 0.3), #00699b);
    }
  }

  .pageItemBodyInner {
    width: 100%;
    position: relative;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    z-index: 1;
    align-content: flex-start;
    opacity: 0;


  }


  .itemMain {
    position: relative;
    width: 100%;
    height: calc(100% - 66px);
    z-index: 12;
    background: url("../imgs/bg.png") center center no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
  }

  .numBody {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    width: 100%;

    position: relative;
    height: 90px;

    .numBodyTitle {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      height: 40px;
      align-content:center;
width: 100%;
      margin-bottom: 5px;

      span {
        font-size: 20px;
        font-family: AlimamaShuHeiTi;
        font-weight: bold;
        color: #FFFFFF;
      }
    }
    .numList{

    }
  }

  .cardBody {
    position: relative;
    width: calc(100% - 40px);
    margin: 0 auto;
    margin-left: 20px;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .cardBodyItem {
      width: 50%;
      height: calc(100% - 0px);
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      .cardBodyItemR {
        display: flex;
        margin-left: 18px;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: nowrap;
        flex-direction: column;
        align-content: flex-start;

        .cardBodyItemRTitle {
          height: 40px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: nowrap;
          flex-direction: row;
          align-content: flex-start;
          font-size: 14px;
          font-family: MicrosoftYaHei;
          font-weight: 400;
          color: #CEEEFE;
        }

        .cardBodyItemBottom {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: nowrap;
          flex-direction: row;
          align-content: flex-start;

          span {
            font-size: 14px;
            font-family: PingFang;
            font-weight: 500;
            color: #CEEEFE;
            margin-left: 10px;
            margin-top: 5px;
          }
        }
      }
    }
  }

  .cardBodyItemBottom {
    .gsapNum {
      width: auto !important;
      font-size: 30px;
      font-family: DIN-Bold, DIN;
      font-weight: bold;
      color: #31FFFD;
      font-family: DIN;
      font-weight: bold;
      color: #FED267;
      text-shadow: 0px 0px 9px rgba(254, 207, 100, 0.61);
    }
  }

  .cardBodyItemBottom2 {
    .gsapNum {
      font-size: 26px;
      font-family: DIN-Bold;
      font-weight: bold;
      color: #67d9fc;
      text-shadow: 0px 0px 9px rgba(#67d9fc, 0.61);
    }
  }

  .item3Info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    width: calc(100% - 30px);
    margin: 0px auto;
    margin-left: 20px;
    height: 25vh;

    .item3InfoItem {
      width: calc(50% - 10px);
      height: calc(33.33% - 10px);
      display: flex;
      background: url("../imgs/itembg.png") no-repeat;
      background-size: 100% 100%;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      box-shadow: 0px 0px 8px rgba(#3268a2, 1); /* 举例：水平偏移、垂直偏移、模糊半径和颜色 */

      .item3InfoItemIcon {
        width: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;

        .iconBg {
          width: 48px;
          height: 56px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: nowrap;
          flex-direction: row;
          align-content: flex-start;
          background: url("../imgs/iconbg.png") no-repeat;
          background-size: 100% 100%;

          img {
            height: 21px;
          }
        }
      }

      .item3InfoItemR {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: nowrap;
        flex-direction: column;
        align-content: flex-start;

        .item3InfoItemTitle {
          font-size: 14px;
          font-family: MicrosoftYaHei;
          font-weight: 400;
          color: #CEEEFE;
        }

        .item3InfoItemRBottom {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: nowrap;
          flex-direction: row;
          align-content: flex-start;

          .item3InfoItemNum {
            font-size: 24px;
            color: #fff;
          }

          .item3InfoItemNum {
            .gsapNum {
              font-size: 26px;
              font-family: DIN;
              font-weight: bold;
              color: #00DCFF;
              text-shadow: 0px 2px 9px rgba(34, 224, 253, 0.35);
              background: linear-gradient(180deg, #CCFBFF 0%, #33CCFF 97.0458984375%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }

          .item3InfoItemUnit {
            font-size: 14px;
            font-family: PingFang;
            font-weight: 500;
            color: #CEEEFE;
            margin-top: 5px;
            margin-left: 10px;
          }
        }
      }
    }

    .item3InfoItem:nth-child(2n-1) {
      margin-right: 16px;
    }
  }

  .list {
    width: calc(100% - 0px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    height: calc(100% - 20px);
    margin-top: 10px;

    .listItem {
      font-size: 14px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      position: relative;
      align-content: flex-start;
      width: 100%;
      height: 20%;

      .listItemLeft {
        width: 80px;
        margin-left: 30px;
        display: flex;
        position: relative;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;

        .name {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #a1bdd1;
        }
      }

      .listItemRight {
        width: calc(100% - 120px);
        position: relative;
        margin-right: 20px;
        height: 100%;
        border-left: #2E4C6E solid 1px;
        margin-left: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;

        .progressBars {
          width: calc(100% - 100px);
          position: relative;
        }

      }
    }
  }
  .echartList {
    margin-left: 0px;
    position: relative;
    width: calc(30% - 0px);
    margin-right: 20px;
    height: calc(100% - 20px);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;

    .listItem {
      font-size: 14px;
      display: flex;
      width: calc(100% - 0px);
      height: 20px;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      .listIteml {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: #FFFFFF;
        width: 140px;
      }

      span {
        font-size: 14px;
        font-family: MiSans;
        font-weight: 400;
        color: #CCD9E5;
      }

      .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 10px;
        flex-shrink: 0;
      }

      .dot.disabled {
        background: rgba(#999, 0.8) !important;
      }

      span.disabled {
        color: rgba(#999, 0.8) !important;
      }

      .num {
        font-size: 14px;
        font-family: MiSans;
        font-weight: 400;
        color: #CCD9E5;
        font-style: normal;
      }
    }
  }

  .echartList2 {
    display: flex;
    position: absolute;
    justify-content: flex-end;
    align-items: flex-end;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    margin-left: 0px;
    width: calc(30% - 0px);
    margin-right: 20px;
    height: calc(100% - 20px);
    margin-bottom: 10px;
    right: 35%;
    pointer-events: none;

    .listItem {
      font-size: 14px;
      display: flex;
      pointer-events: initial;
      width: calc(100% - 0px);
      height: 20px;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      .listIteml {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: #FFFFFF;
        width: 140px;
      }

      span {
        font-size: 14px;
        font-family: MiSans;
        font-weight: 400;
        color: #CCD9E5;
      }

      .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 10px;
        flex-shrink: 0;
      }

      .dot.disabled {
        background: rgba(#999, 0.8) !important;
      }

      span.disabled {
        color: rgba(#999, 0.8) !important;
      }

      .num {
        font-size: 14px;
        font-family: MiSans;
        font-weight: 400;
        color: #CCD9E5;
        font-style: normal;
      }
    }
  }

  .echartListAll {
    margin-left: 0px;
    position: relative;
    width: calc(30% - 0px);
    margin-right: 20px;
    height: calc(100% - 20px);
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;

    .listItem {
      font-size: 14px;
      display: flex;
      width: calc(100% - 0px);
      height: 20px;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      .listIteml {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: #FFFFFF;
        width: 140px;
      }

      span {
        font-size: 14px;
        font-family: MiSans;
        font-weight: 400;
        color: #CCD9E5;
      }

      .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 10px;
        flex-shrink: 0;
      }

      .dot.disabled {
        background: rgba(#999, 0.8) !important;
      }

      span.disabled {
        color: rgba(#999, 0.8) !important;
      }

      .num {
        font-size: 14px;
        font-family: MiSans;
        font-weight: 400;
        color: #CCD9E5;
        font-style: normal;
      }
    }
  }
  .echartsBodys {
    width: 100%;
    position: relative;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }
</style>
